<template>
	<view class="content">
		<view class="search-upload">
			<!-- confirm-hold 可以确认时候收拾起键盘 -->
			<input class="search" type="text" confirm-hold="true" @blur="search" @confirm="search" :value="searchKey"
			 placeholder="搜索" />
			<image class="upload" src="../../static/image/upload.svg" mode="aspectFit" @click="upload">

			</image>
			<image class="refresh" src="../../static/image/refresh.svg" mode="aspectFit" @click="refresh">

			</image>


		</view>

		<scroll-view scroll-y="true">
			<view v-for="(file,index) in fileDTO" :key="index" title="文件列表">
				<view class="file">
					<input type="text" disabled="true" @click="download(file.fileName)" :value="file.fileName" />
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	var serverUrl = '';
	export default {
		data() {
			return {
				title: 'index',
				searchKey: '',
				fileDTO: [],
				serverUrl: this.serverUrl
			}
		},
		onLoad() {
			serverUrl = this.serverUrl;
		},


		methods: {

			//搜索文件
			search(e) {
				//console.log("搜索文件");
			},
			download(fileName) {
				var filePath = ''
				uni.showModal({
					title: '确认下载',
					success: (select) => {
						var toastMessage;
						if (select.confirm == true) {
							uni.showToast({
								title: '开始下载',
								duration: 500,
							});
							//这里发起下载请求函数.
							//.....
							var downloadTask = uni.downloadFile({
								url: serverUrl + '/file/download/'+fileName,
								header: {
									'token': getApp().globalData.token
								},
								success(res) {
									//打印文件路径
									console.log("tempfilePath===");
									var tempfilePath = res.tempFilePath;
									console.log(tempfilePath);
									//这里永久的储存.
									uni.saveFile({
										tempFilePath: tempfilePath,
										success(res) {
											//这里是永久保存的路径
											console.log("=====返回数据=====");
											console.log(res);
											if (res.statusCode === 200) {
												console.log('下载成功');
											}
										}
									})
									
								},
								fail: (param) => {
									console.log("=失败=");
									console.log(param);
								} 
							})
							//监听下载进度
							downloadTask.onProgressUpdate((res) => {
							    console.log('下载进度' + res.progress);
							    console.log('已经下载的数据长度' + res.totalBytesWritten);
							    console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
							
							    // 测试条件，取消下载任务。
							    if (res.progress > 50) {
							        downloadTask.abort();
							    }
							});	

						}
					}
				});
			},
			//uniapp 没有更新，我们这里只能上传图片.
			//或者我们能得到文件的路径就能上传文件。
			upload() {
				uni.showModal({
					title: '确认上传文件',
					success(select) {
						//确认上传
						if (select.confirm) {
							//选择图片.
							uni.chooseImage({
								count: 1,
								success(tempfilePaths) {
									var file = tempfilePaths.tempFiles[0]
									var fileName = file.name
									var filePath = file.path
									uni.uploadFile({
										url: serverUrl + '/file/upload',
										name: 'file',
										filePath: filePath,
										header: {
											'token': getApp().globalData.token
										},
										success(res) {

											if (res.statusCode == 200) {
												uni.showToast({
													title: '上传成功'
												})
												//这里要刷新文件界面.刷新界面.
												this.refresh
											} else {
												console.log("上传失败");
												//上传失败
												uni.showToast({
													icon: 'none',
													content: '上传失败，请重试'
												})
											}

										}
									})
								}
							})
						}
					}
				})

			},
			refresh() {
				uni.showToast({
					icon: 'loading',
					duration: 500,
					title: '刷新文件'
				})
				var files = []

				uni.request({
					url: serverUrl + '/file/refresh',
					method: 'POST',
					header: {
						'token': getApp().globalData.token
					},
					success: res => {

						if (res.data.code == '200') {
							files = res.data.data
							this.fileDTO = files
							//刷新成功
							return 0
						}
						//刷新失败提示
						uni.showModal({
							title: '请重试',
							content: '刷新失败',
							showCancel: false
						})
					}
				})

			}
			//其他方法
		}
	}
</script>

<style>
	.search-upload {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.refresh,
	.upload {
		width: 60upx;
		height: 60upx;
	}


	.search {
		height: 50upx;
		width: 380upx;
		margin-top: 20upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 80upx;
		color: #000000;
		background-color: #FFFFFF;
		text-align: center;
		border-bottom: 1upx solid #000000;
	}


	.file {
		display: flex;
		height: 50upx;
		width: 500upx;
		margin-top: 20upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20upx;
		color: #000000;
		background-color: #FFFFFF;
		text-align: center;
		border-bottom: 1upx solid #000000;

	}
</style>
